<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>main-主画面</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<!--<link href="css/iconfont.css" rel="stylesheet" />
		<link href="css/divpopover.css" rel="stylesheet" />-->
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}

		.signin {
			position: fixed;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			z-index: 99;
			display: none;
		}

		.signin1 {
			width: 300px;
			height: 400px;
			position: fixed;
			left: 50%;
			top: 25%;
			margin-left: -150px;
			border: none;
		}

		#gongfen {
			width: 70%;
			height: 50%;
			position: fixed;
			top: 25%;
			left: 14%;
		}

		#signincount {
			position: fixed;
			z-index: 2;
			top: 51vh;
			left: 130px;
			height: 30px;
			width: 100%;
			background-color: transparent;
		}

		@media (max-height:720px) {
			#signincount {
				position: fixed;
				left: 120px;
			}
		}

		.signin-item-a {
			font: bold 1.6rem/2.0rem "Microsoft YaHei";
			color: #000000;
			background-color: #FFFFFF;
			text-align: center;
			line-height: 1.0rem;
		}

		#signingofen {
			position: fixed;
			z-index: 2;
			top: 59vh;
			left: 110px;
			height: 30px;
			width: 480px;
			background-color: transparent;
		}

		@media (max-height:720px) {
			#signingofen {
				position: fixed;
				left: 100px;
			}
		}

		#signinstore {
			position: fixed;
			z-index: 2;
			top: 68vh;
			left: 185px;
			height: 20px;
			width: 380px;
			background-color: transparent;
		}

		@media (max-height:720px) {
			#signinstore {
				position: fixed;
				left: 170px;
			}
		}

		.noneUL {
			margin-top: 0px;
			margin-bottom: 0px;
			padding-left: 0px;
		}

		.bgc-white {
			background-color: #FFFFFF;
		}

		.signin-item {
			height: 8rem;
			width: 35%;
			float: left;
		}

		.signin-p {
			margin: 0 1.1rem;
			font: bold 1.2rem/1.6rem "Microsoft YaHei";
			color: #FFFFFF;
			background-color: #3FBDF0;
			border-radius: 1.6rem;
			text-align: center;
			margin-bottom: 1.1rem;
		}

		.Background {
			width: 100%;
		}

		.mui-table-view:after {
			height: 0;
		}

		.mui-table-view:before {
			height: 0;
		}

		.mui-table-view.mui-grid-view {
			background-color: #E8EDF1;
		}

		.my-tableview {
			font-size: inherit !important;
			padding: -1px 10px 10px 10px !important;
		}

		.my-tableview .mui-table-view-cell {
			left: 5px;
			padding: 0 0 0 0 !important;
		}

		.my-tableview .mui-table-view-cell>a:not(.mui-btn) {
			margin: 0 !important;
		}
	</style>

</head>

<body>
	<header class="mui-bar mui-bar-nav" style="padding-right: 15px; height: 9%;">
		<p></p>
		<img class="mui-btn-link" style="border-radius: 46px;border: none;" height="46" width="46" src="images/user-photo.png" id="myprofile"
		/>
		<div id="vip" style="position:absolute; z-index:2;left:20px;top:12px;color:#FFFF00;display:inline-block;">VIP</div>
		<label style="position: absolute; left: 16vw; top: 4vh; font-size: 6vw; color: #434341;">您好！
			<span id='account'></span>
		</label>
		<img class="mui-pull-right mui-btn-link" height="46" width="46" id="upload" src=""
		/>
	</header>
	
	<div id="con">
		<img class="Background" src="">
	</div>
	<div class="mui-content">
		<div class="mui-content-padded" style="margin: 5px;">
			<p>
				<div id="layout2" style="position: absolute; width: 95%; height: 20%; z-index: 1; left: 10px; top: 12%">
					<div class="head">
						<div class="mui-input-row mui-search mui-input-speech search">
							<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
						</div>
						<span id="message" style="font-size: 20px; color: #6F7072;">
							<marquee direction=left behavior=scroll scrollamount=6 scrolldelay=1 align=middle height=50 width=100% hspace=1 vspace=1>
								<span id="weather"></span>
							</marquee>
						</span>
					</div>
				</div>
				<div id="layout3" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 43vw">
					<div id="contuijian">
						<img class="Background" src="images/tuijian.png">
					</div>
					<div id="slider" class="mui-slider" style="position: absolute;top:6vh;border: none;">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img alt="" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 0vw" src="images/5.jpg">
								</a>
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img alt="" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 0vw" src="images/1.jpg">
								</a>
							</div>
							<!-- 第二张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img alt="" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 0vw" src="images/2.jpg">
								</a>
							</div>
							<!-- 第三张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img alt="" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 0vw" src="images/3.jpg">
								</a>
							</div>
							<!-- 第四张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img alt="" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 0vw" src="images/4.jpg">
								</a>
							</div>
							<!-- 第五张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img alt="" style="position: absolute; width: 100%; height: 60vw; z-index: 1; left: 0vw; top: 0vw" src="images/5.jpg">
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img alt="" src="images/1.jpg">
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
				</div>
				<div id="layout4" style="position: absolute;width: 100%;z-index: 1;left: 0vw;top: 114vw;">
					<div id="conpindao">
						<img class="Background" src="images/pindao.png">
					</div>
					<ul class="mui-table-view mui-grid-view my-tableview" style="position: absolute;top:6vh;">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/gewu.png" onclick="play('gewu')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">歌舞</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/meishi.jpg" onclick="play('meishi')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">美食</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/lvxing.jpg" onclick="play('lvxing')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">旅行</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#">
								<img class="mui-media-object" src="images/pet.jpg" onclick="play('pet')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">萌宠</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#">
								<img class="mui-media-object" src="images/jiaoyu.jpg" onclick="play('jiaoyu')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">教育</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#">
								<img class="mui-media-object" src="images/tonghao.jpg" onclick="play('tonghao')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">同好</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#">
								<img class="mui-media-object" src="images/yangsheng.jpg" onclick="play('yangsheng')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">养生</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#">
								<img class="mui-media-object" src="images/tijian.jpg" onclick="play('tijian')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">体健</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#">
								<img class="mui-media-object" src="images/zonghe.jpg" onclick="play('zonghe')">
								<div class="mui-media-body" style="margin-bottom: 5px;font-size: 16px; color: #6F7072;">综合</div>
							</a>
						</li>
					</ul>
				</div>
			</p>
			<!--<button  class="mui-btn mui-btn-block mui-btn-primary">设置</button>-->
			<!--
				<button id='exit' class="mui-btn mui-btn-block mui-btn-green">关闭</button>
                <button id='logout' class="mui-btn mui-btn-red mui-btn-block">注销登录</button>
                -->
		</div>
	</div>
	 <div id="signin" class="signin">
		<div class="signin1">
			<img href="javascript:;" onclick="hideSignin(false)" class="close" id="gongfen" src="">
		</div>
		<ul id="signincount" class="mui-table-view noneUL bgc-white mui-clearfix">
			<li class="mui-table-view-cell signin-item">
				<a class="signin-item-a" href="javascript:;" onclick="hideSignin(false)">
					<p id="signin-date">7月18日</p>
					<p id="signin-cnt">已连续签到1天</p>
				</a>
			</li>
		</ul>
		<ul id="signingofen" class="mui-table-view noneUL bgc-white mui-clearfix">
			<li class="mui-table-view-cell signin-item">
				<a class="signin-item-b" href="javascript:;" onclick="hideSignin(true)">
					<p id="signin-enter" class="signin-p">领取工分</p>
				</a>
			</li>
		</ul>
		<ul id="signinstore" class="mui-table-view noneUL bgc-white mui-clearfix">
			<li class="mui-table-view-cell signin-item">
				<a class="signin-item-c" href="javascript:;" onclick="goStore()">
					<p id="signin-enter" class="signin-p">进入</p>
				</a>
			</li>
		</ul>
	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.enterfocus.js"></script>
	<script src="js/common.js"></script>
	<script src="js/app.js"></script>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script>
		mui.init();

		mui.back = function () {
			var btnArray = ['是', '否'];
			mui.confirm('是否退出应用', '爸妈圈', btnArray, function (e) {
				if (e.index == 0) {
					plus.runtime.quit();
				}
			});
		}

		var settings = app.getSettings();
		var account = document.getElementById('account');
		var headImage = document.getElementById('myprofile');
		var mask = null;
		//var floatw=null; //悬浮窗口

		mui.plusReady(function () {
			//location
			var loc = null;
			loc = plus.geolocation.getCurrentPosition( function ( p ) {
				console.log( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );
				console.log("addresses = " + p.addresses);
				console.log("province = " + p.address.province);
				console.log("city = " + p.address.city);
			}, function ( e ) {
				console.log( "Geolocation error: " + e.message );
			},{enableHighAccuracy: true});
			
			//weather
			var weather = document.getElementById("weather");
			weather.innerText = "北京时间：" + getNowFormatDate(0) + "　正在获取农历和天气状况数据...";
			mui.ajax({
				type: "get",
				datatype: 'JSON',
				url: "http://base.itsoo.cn/api/content/message",
				async: true,
				success: function (data) {
					//console.log(data);
					var dataTemp = data.object;
					//console.log(dataTemp)
					weather.innerText = dataTemp;
				},
				error: function (data) {
					//alert("error");
					weather.innerText = "北京时间：" + getNowFormatDate(0) + "　农历和天气状况数据获取失败！";
				}
			});	//请求滚动数据

			var myprofilePage = mui.preload({
				"id": 'myprofile',
				"url": 'myprofile.html'
			});
			var uploadPage = mui.preload({
				"id": 'upload',
				"url": 'upload.html'
			});
			/*var followPage = mui.preload({
				"id": 'follow',
				"url": 'follow.html'
			});*/
			plus.storage.setItem("vip", "1");
			account.innerText = plus.storage.getItem("name");
			headImage.src = plus.storage.getItem("headimgurl");
			var viplevel = plus.storage.getItem("vip");
			if (viplevel == null || viplevel == "0") {
				plus.storage.setItem("vip", "0");
				document.getElementById('vip').style.display = "none";
			} else {
				document.getElementById('vip').innerText = "VIP" + viplevel;
				document.getElementById('vip').style.display = "inline-block";
			}

			//设置
			var myprofileButton = document.getElementById('myprofile');
			myprofileButton.addEventListener('tap', function (event) {
				mui.openWindow({
					id: 'myprofile',
					show: {
						aniShow: 'pop-in'
					},
					styles: {
						popGesture: 'hide'
					},
					waiting: {
						autoShow: false
					}
				});
			});

			//上传
			var uploadButton = document.getElementById('upload');
			uploadButton.addEventListener('tap', function (event) {
				mui.openWindow({
					id: 'upload',
					show: {
						aniShow: 'pop-in'
					},
					styles: {
						popGesture: 'hide'
					},
					waiting: {
						autoShow: false
					}
				});
			});

			//弹出工分对话框
			/*plus.storage.removeItem("signin"+getNowFormatDate(1));
			plus.storage.removeItem("startsignin");
			plus.storage.removeItem("endsignin"); */
			var gongfen = plus.storage.getItem("signin" + getNowFormatDate(1));
			var start = plus.storage.getItem("startsignin");
			var last = plus.storage.getItem("endsignin");
			/* alert(getNowFormatDate(1)+" : " +gongfen);
			alert("start : " +start);
			alert("last : " +last); */

			if (gongfen == null) {
				var gfplus = null;
				if (last == getYesterday()) {
					var t1 = new Date(start.replace(/-/g, "/"));
					var t2 = new Date(last.replace(/-/g, "/"));
					var days = t2.getTime() - t1.getTime();
					var time = parseInt(days / (1000 * 60 * 60 * 24));
					gfplus = time + 1;
				} else {
					//重新计算开始签到时间
					gfplus = 1;
				}

				//floatWebview(gfplus.toString());   //显示工分悬浮窗口
				
				//显示悬浮窗口
				jQuery('#signin-date').text(getNowFormatDate(2));
				jQuery('#signin-cnt').text("已连续签到" + gfplus + "天");
				 mask = mui.createMask(function() {
					return true;
				});
				mask.show();
				jQuery('.signin').show();
				return false; 
			}
		});

		/*function floatWebview(gf){
			if(floatw){ // 避免快速多次点击创建多个窗口
				return;
			}
			floatw=plus.webview.create("signin.html","signin.html",{width:'300px',height:'300px',margin:"auto",background:"rgba(0,0,0,0.8)",scrollIndicator:'none',scalable:false,popGesture:'none'});
			floatw.addEventListener("loaded",function(){
				floatw.show('fade-in',300,{gfplus: gf,account: account});
				floatw=null;
			},false);
		}*/
		
		function play(name) {
			clicked("follow.html", true, {
				"mid": name
			});
		}

		 function goStore() {
			jQuery('.signin').hide();
			clicked("store.html", true, {
				"mid": account
			});
		} 

		function hideSignin(signin) {
			jQuery('.signin').hide();
			mask.close();

			if (signin) {
				var last = plus.storage.getItem("endsignin");
				plus.storage.setItem("signin" + getNowFormatDate(1), "1");
				plus.storage.setItem("endsignin", getNowFormatDate(1));
				if (last != getYesterday()) {
					//重新计算开始签到时间
					plus.storage.setItem("startsignin", getNowFormatDate(1));
				}
			}
		}

		//获得昨天时间,格式YYYY-MM-DD
		function getYesterday() {
			var date = new Date();
			var seperator1 = "-";
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var strDate = date.getDate() - 1;

			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			return year + seperator1 + month + seperator1 + strDate;
		}

		//获取当前时间，格式1：YYYY-MM-DD, 2：M月D日, 0或其他值：YYYY年M月D日
		function getNowFormatDate(flag) {
			var date = new Date();
			var seperator1 = "-";
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			var currentdate;
			if (flag == 1) {
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				currentdate = year + seperator1 + month + seperator1 + strDate;
			}
			else if (flag == 2) {
				currentdate = month + '月' + strDate + '日';
			}
			else {
				currentdate = year + '年' + month + '月' + strDate + '日';
			}
			return currentdate;
		}
	</script>
</body>

</html>